<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="layout/layout">
<section layout:fragment="content-header" class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>添加视频
                </h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="javascript: window.history.go(-1);">返回</a></li>
                </ol>
            </div>
        </div>
    </div>
</section>
<div layout:fragment="main-content">

    <section class="content">
        <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">添加视频</h3>
                    </div>
                    <div class="">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="uploader1">视频上传</label>
                                <input type="hidden" id="video" />
                                <!-- 上传 -->
                                <div id="uploader1" class="wu-example">
                                    <div id="thelist1" class="uploader-list">

                                    </div>
                                    <div class="btns">
                                        <div id="picker1">视频上传</div>
                                    </div>
                                </div>
                            </div>
<!--                            <div class="form-group">-->
<!--                                <label for="labelName">视频名称</label>-->
<!--                                <input type="text" name="name" class="form-control" id="labelName"-->
<!--                                       placeholder="请输入名称" maxlength="30">-->
<!--                            </div>-->

                        </div>

                    </div>

                </div>

        </div>

    </section>


</div>


<script layout:fragment="business-script">
        $(function () {
            function addvideo(res) {
                //
                $('#video').val(res.url);
            }

            /*对于一些控件的初始化*/
            //待上传的文件列表
            var state = 'pending',
                //上传的方法
                videouploader;


            videouploader = WebUploader.create({
                // 不压缩image
                resize: false,
                // 为true 文件则自动上传
                auto: true,
                // 文件接收服务端。就是上传文件走的url
                server: '/admin/upload/video',
                // 选择文件的按钮。可选。
                pick: {
                    id: '#picker1',
                    multiple: false,
                },
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'mp4,flv,rmvb,avi,wmv',
                    mimeTypes: 'video/x-flv,video/mp4,video/x-msvideo,video/x-ms-wmv'
                },
            });

            videouploader.on( 'fileQueued', function( file ) {
                showLoading();
            });

            // 上传成功
            videouploader.on( 'uploadSuccess', function( file, response ) {
                var documentData = response.data;

                alert('上传成功')
                hideLoading();

            });

            // 上传失败
            videouploader.on( 'uploadError', function( file ) {
                layer.msg("上传出错");
            });

            videouploader.on( 'all', function( type ) {
                if ( type === 'startUpload' ) {
                    state = 'uploading';
                } else if ( type === 'stopUpload' ) {
                    state = 'paused';
                } else if ( type === 'uploadFinished' ) {
                    state = 'done';
                 }
            });

        });


</script>
